<template>
	<view class="page page-center">

		<view class="top-background"></view>

		<view class="center-wrap">
			<!-- 用户信息 -->
			<view class="center-white">
				<view class="user-infos" v-if="!userInfo.nickName" @tap="getUserProfile">
					<view class="qqq">
						<image src="@/static/center/pic-avatar.png" class="custom-avatar"></image>
						<view class="sync">同步微信资料</view>
					</view>
					
				</view>
				<view v-else class="user-infos">
					<view class="qqq">
						<image @tap="getUserProfile" :src="userInfo.avatarUrl" class="custom-avatar"></image>
						<view class="name">{{userInfo.nickName}}</view>
					</view>
					<view class="aaa" v-if="userInfo.idcard_auth==0" @click="realNameBtn">
						<image src="../../static/new/shiming.png" mode=""></image>
						<text>实名认证</text>
					</view>
				</view>
				
				<!-- 顶部导航 -->
				<view class="navigation">
					<navigator class="item" hover-class="none" url="/pages/cabinet/list">
						<view><image src="../../static/new/hegui.png" mode=""></image></view>
						<view class="label">我的库存</view>
					</navigator>
					<navigator class="item" hover-class="none" url="/pages/center/balance">
						<view><image src="../../static/new/yue.png" mode=""></image></view>
						<view class="label">玉石</view>
					</navigator>
					<navigator class="item" hover-class="none" url="/pages/center/team">
						<view><image src="../../static/new/quan.png" mode=""></image></view>
						<view class="label">我的邀请</view>
					</navigator>
				</view>
			</view>
			
			<!-- 用户菜单 -->
			<view class="menus">
				<!-- <view class="group-card" v-if="groupShow">
					<view class="card-left">
						<u-image src="/static/index/new-card.png" width="122" height="80"></u-image>
						<view>新人进群领卡片</view>
					</view>
					<view class="card-right" @click="viewInfo">立即参与</view>
					<image src="/static/index/card-close.png" class="close-icon" @click="groupShow = false"></image>
				</view> -->
				<view class="item-title" @click="posterShare">推广图</view>
				<navigator class="item" v-if="userInfo.is_promoter === 0 && config.promoter_switch == 1 && config.promotion_model==2" hover-class="none" url="/pages/center/extension">
					<text class="label">成为推广员</text>
					<u-icon name="arrow-right" size="32"></u-icon>
				</navigator>
				<navigator class="item" hover-class="none" url="/pages/center/cooperation">
					<text class="label">合作</text>
					<u-icon name="arrow-right" size="32"></u-icon>
				</navigator>
				<view class="item" @click="customer = true">
					<text class="label">客服</text>
					<u-icon name="arrow-right" size="32"></u-icon>
				</view>
			</view>
			
			<!-- <u-divider border-color="#2F2E3B" bg-color="#F5F5F8" color="#2E2B2B" fontSize="32" style="font-weight: bold;">大家都在抢</u-divider> -->
			<!-- 大家都在抢 -->
			<!-- <view v-if="cateList.length>0" class="list">
				<template v-for="(goods, g) in cateList">
					<view @click="viewDetail(goods.id)" class="item" :key="g">
						<view class="cover-box">
							<u-image :src="goods.image" width="340" height="340" border-radius="16" mode="widthFix"></u-image>
							<image src="@/static/index/icon-new.png" class="tag" v-if="goods.tag_init == 4"></image>
							<view v-if="config.people_number_switch==1" class="quantity">{{goods.order_count}}人已开购</view>
						</view>
						
						<view class="info-box">
							<view class="name">{{goods.name}}</view>
							<view class="price">
								<text class="unit">¥ </text>
								<text class="money">{{goods.price}}</text>
							</view>
						</view>
					</view>
				</template>
			</view> -->
			
			<!-- <view v-else class="empty-box">
				<u-empty mode="list"></u-empty>
			</view> -->
			
			<!-- 版权说明 -->
			<view class="copy-right">
				<!-- <view class="header">
					<view class="line"></view>
					<image :src="config.applet_copyright" class="logo"></image>
					<view class="line"></view>
				</view> -->
				<view class="slogan">良藏艺术 正品保障</view>
			</view>
			
			<!-- 海报 -->
			<view v-if="posterShow" class="posterBacks">
				<view class="shareImg1">
					<image :src="qrcode" :style="'width:400rpx;height:400rpx;margin:auto;margin-top:160rpx'"
						v-if="imgSrc != ''"></image>
					<canvas canvas-id="shareImg" :style="'width:'+w+'rpx;height:'+h+'rpx;margin:auto;margin-top:160rpx'"
						v-show="imgSrc == ''"></canvas>
				</view>
				<view class="maksbox"></view>
				<view class="canvas_nav">
					<view class="canvas_nav_top">
						<!-- <button plain="true" open-type="share" class="canvas-child">
							<u-image style="margin-top: 20rpx;" src="/static/index/weath-icon.png" width="96" height="96"></u-image>
							<view>分享好友</view>
						</button> -->
						<view class="canvas-child" @click="SaveCard">
							<u-image src="/static/index/download-icon.png" width="96" height="96"></u-image>
							<view>下载海报</view>
						</view>
					</view>
					<view class="canvas_nav-bottom" @click="posterShow = false">取消</view>
				</view>
			</view>

		</view>
		
		<u-modal v-model="showLogin" :show-cancel-button="true" content="请授权手机号">
			<button slot="confirm-button" open-type="getPhoneNumber"  @getphonenumber="getPhoneNumber" class='authorization'>
				确定
			</button>
		</u-modal>

		<!-- 客服 -->
		<view class="customerBack" v-if="customer" @click="customer = !customer"></view>
		<view class="customerBacks" v-if="customer" >
			<view class="customerName">
				联系客服
			</view>
			<view class="customerContent">
				{{config.service_slogan}}
			</view>
			<view class="customerFlex">
				<button class="left" open-type="contact" @click="toOff" :send-message-title="config.card_title"
					:send-message-img="config.card_img" show-message-card="true"
					send-message-path="/pages/index/index">
					<u-icon name="/static/center/chat.png" size="32"></u-icon>
					<text>联系客服</text>
				</button>
				<!-- <view class="customerShu"></view>
				<view class="right" @click="callPhone">
					<u-icon name="phone-fill" size="32"></u-icon>
					<text>电话咨询</text>
				</view> -->
			</view>
		</view>
		<view v-if="customer" @click="customer = !customer" class="cancel">
			<u-icon name="close-circle" size="64" color="#FFFFFF"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex"
	
	export default {
		data() {
			return {
				ids: 0,
				showLogin: false,
				info: {},
				show: true,
				customStyle: {
					height: '60rpx',
					lineHeight: '60rpx',
					color: '#333333',
					fontSize: '28rpx',
					margin: '0',
				},
				customer: false,

				cateList: '',
				groupShow: true,
				
				posterShow: false, //海报
				imgSrc: '',
				w: 570,
				h: 786,
				goodsImg: 'https://box.wiod.cn/haibao.jpg', //商品图
				avatar: '', //头像
				qrcode: '', //二维码
				arrow: '',
				icon1: '',
				
				url:this.$net.url+'/addons/lingchi_guess_box/public/wxapp/bg.png'
			}
		},
		computed: {
			...mapGetters(['userInfo', 'config'])
		},
		onShareAppMessage() {
			let name = this.userInfo.nickName
			let names
			if(name.length > 10){
				names = name.slice(0, 10) + '...'
			}else{
				names = name
			}
			let title = names + '邀请您参与盲盒抽奖'
			let path = '/pages/index/index?share_user=' + this.userInfo.id
			
			return {
				title: title,
				path: path
			}
			
		},
		onShow() {
			this.getMine()
			this.$net.req('/BlindBox/getLists', {where: {init: 5}}, false).then(res => {
				if (res.code === 200) {
					this.cateList = res.data.list
				}
			})
		},
		methods: {
			...mapActions(['setUser']),
			realNameBtn(){ //实名认证按钮
				uni.navigateTo({
					url:'/pages/newPage/realName'
				})
			},
			viewInfo(){
				this.router('/pages/index/group-url')
			},
			getPhoneNumber(e){
				if(e.detail.errMsg === 'getPhoneNumber:ok'){
					let data = {
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData
					}
					this.$net.req('/user/getMobile', data, false).then(res=>{
						if(res.code == 200){
							this.getMine()
						}
					})
				}else{
					uni.showToast({
						title: '用户拒绝授权',
						icon: 'none',
						mask: true
					})
					return
				}
			},
			viewDetail(id) {
				uni.navigateTo({
					url: `/pages/box/detail?blind_box_id=${id}`
				})
			},
			viewPage(url) {
				uni.navigateTo({
					url: url,
					fail(err) {
						uni.switchTab({
							url: url
						})
					}
				})
			},
			getMine() {
				this.$net.req('/user/getMine', {}, false).then(res => {
					if (res.code === 200) {
						this.setUser(res.data)
						
					}
				})
			},
			getUserProfile() {
				let that = this
				this.router('/pages/login/index')
				return
				wx.getUserProfile({
					desc: '用于完善个人信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						that.updateUser(res.userInfo)
					}
				})
			},
			updateUser(data) {
				this.$net.req('/user/update', {data}, false).then(res => {
					if (res.code == 200) {
						if(this.userInfo.mobile == ''){
							this.showLogin = true
						}
						this.setUser(data)
						this.getMine()
					}
				})
			},
			callPhone() {
				let phone = this.config.service_mobile
				uni.makePhoneCall({
					phoneNumber: phone + ''
				})
			},
			toOff() {
				this.$net.req('/message/service', {}, false).then(res => {})
			},
			
			
			// 生成海报
			posterShare() {
				let _this = this
				this.posterShow = true
				if (this.imgSrc != '') {
					return; //判断that.imgSrc是不是空的字符串，如果是空的就继续画图，如果不是空的就return返回that.imgSrc它已经有的字符串
				}
				this.$net.req('/user/getMiniCode', {
					box_id: 1
				}, false).then(res => {
					console.log(res)
					if (res.code === 200) {
						uni.showLoading({
							title: '图片生成中...',
							mask: true
						})
						if (this.userInfo.avatarUrl) {
							this.downloadImg('avatar', this.userInfo.avatarUrl)
						} else {
							uni.showToast({
								title: '请先同步信息',
								icon: 'none'
							});
						}
						// _this.qrcode = res.data.qrcode.replace('http://','https://')
						let qrcode = res.data.qrcode.replace('http://','https://')
						let arrow = res.data.qrcode.replace('http://','https://')
						this.downloadImg('goodsImg', _this.goodsImg)
						this.downloadImg('icon1', arrow)
						this.downloadImg('qrcode', qrcode)
					} else {
						uni.showToast({
							title: '二维码生成失败',
							icon: 'none'
						});
					}
				})
			},
			
			// 下载图片
			downloadImg(str, url) {
				var that = this;
				uni.downloadFile({
					url: url,
					success: function(res3) {
						that[str] = res3.tempFilePath
						if (that.avatar != '' && that.goodsImg != '' && that.qrcode != '' && that.icon1 !=
							'') {
							uni.hideLoading(); //隐藏图片加载旋转标志
							that.draw()
						}
					},
					fail: function(err) {
						uni.hideLoading();
						uni.showToast({
							title: '海报制作失败，图片下载失败(海报模版)',
							icon: 'none'
						});
					}
				})
			},
			// 画图
			async draw() {
				let _this = this;
				let ctx = uni.createCanvasContext('shareImg', this)

				// 第一层背景
				ctx.setFillStyle('#FFFFFF')
				ctx.fillRect(0, 0, _this.px_to_rpx(_this.w), _this.px_to_rpx(_this.h))
				ctx.restore();
				//奖品图
				// _this.drawImg(_this.goodsImg, 20, 20, 570, 570, ctx)
				// 小图标
				_this.drawImg(_this.icon1, 20, 595, 40, 40, ctx)
				// 商品标签
				ctx.setFillStyle('#2E2B2B')
				ctx.setFontSize(_this.px_to_rpx(28))
				ctx.fillText('扫码进入', _this.px_to_rpx(70), _this.px_to_rpx(625));
				// ctx.fillText('Shopping Go', _this.px_to_rpx(70), _this.px_to_rpx(625));
			
				// 价钱
				ctx.setFillStyle('#DFC791')
				ctx.setFontSize(_this.px_to_rpx(28))
				// ctx.fillText('￥' + _this.detail.price, _this.px_to_rpx(286), _this.px_to_rpx(625));
				// 二维码
				_this.drawImg(_this.qrcode, 408, 528, 200, 200, ctx)
				// 商品名称 
				let names = '良藏艺术'
				let name
				// let names = '超长名称测试用不换行省略号显示问题阿斯蒂芬看见了开皇冠老虎机'
				if (names.length > 20) {
					name = names.slice(0, 15) + '...'
				} else {
					name = names
				}
				ctx.setFillStyle('#2E2B2B')
				ctx.setFontSize(_this.px_to_rpx(28))
				ctx.fillText(name, _this.px_to_rpx(20), _this.px_to_rpx(700));
				// 标签
				ctx.setFillStyle('#C3C2C1')
				ctx.setFontSize(_this.px_to_rpx(24))
				ctx.fillText('邀请好友下单反玉石', _this.px_to_rpx(20), _this.px_to_rpx(748));
			
				//头像
				// ctx.save();
				// ctx.beginPath();
				// ctx.arc(_this.px_to_rpx(62), _this.px_to_rpx(796), _this.px_to_rpx(32), 0, Math.PI *
				// 	2, false);
				// ctx.clip();
				// ctx.drawImage(_this.avatar, _this.px_to_rpx(14), _this.px_to_rpx(752), _this
				// 	.px_to_rpx(96), _this.px_to_rpx(96)); //绘制图
				// ctx.restore();
				ctx.draw(true, () => {
					setTimeout(function() {
						uni.canvasToTempFilePath({
							canvasId: 'shareImg',
							fileType: 'jpg',
							x: 0,
							y: 0,
							width: _this.px_to_rpx(_this.w) * 8, //四倍图，防止模糊
							height: _this.px_to_rpx(_this.h) * 8,
							destWidth: _this.px_to_rpx(_this.w) * 8,
							destHeight: _this.px_to_rpx(_this.h) * 8,
							success: function(res) {
								_this.imgSrc = res.tempFilePath
							},
							fail: function(error) {},
						})
					}, 100)
				})
			},
			
			px_to_rpx(e) {
				return (e / 2) * (wx.getSystemInfoSync().windowWidth / 375)
			},
			darwRoundRect(x, y, w, h, r, ctx, color) {
				ctx.save()
				ctx.beginPath()
				ctx.arc(x + r, y + r, r, 1 * Math.PI, 1.5 * Math.PI)
				ctx.moveTo(x, y + r)
				ctx.lineTo(x, y + h - r)
				ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, 1 * Math.PI)
				ctx.lineTo(x + r, y + h)
				ctx.lineTo(x + w - r, y + h)
				ctx.arc(x + w - r, y + h - r, r, 0 * Math.PI, 0.5 * Math.PI)
				ctx.lineTo(x + w, y + h - r)
				ctx.lineTo(x + w, y + r)
				ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI)
				ctx.lineTo(x + w - r, y)
				ctx.lineTo(x + r, y)
				ctx.setFillStyle(color)
				ctx.fill()
				ctx.restore();
			},
			
			// 拼图
			async drawImg(url, x, y, w, h, ctx) {
				let _this = this;
				ctx.drawImage(url, _this.px_to_rpx(x), _this.px_to_rpx(y), _this
					.px_to_rpx(w), _this.px_to_rpx(h));
			},
			
			// 保存海报
			SaveCard() {
				let that = this;
				let tempFilePaths = that.qrcode //tempFilePaths定义一下海报的的临时地址
				wx.saveImageToPhotosAlbum({
					filePath: tempFilePaths,
					success(res) {
						uni.showToast({
							icon: "none",
							title: "图片保存成功"
						})
						// that.showShare = false
					}
				})
			},
			

			
			
			
			
			
		}
	}
</script>

<style lang="scss">
	.page.page-center {
		.top-background {
			width: 750rpx;
			height: 380rpx;
			background: url(../../static/center/bg-top.png) no-repeat 0 0 #7E65FF;
			background-size: 750rpx 380rpx;
		}

		.center-wrap {
			width: 750rpx;
			// background: #F6F6F6;
			background: #292C2D;
			border-radius: 32rpx 32rpx 0 0;
			margin-top: -52rpx;
			padding: 0 0 50rpx;
			.center-white{
				background-color: #292C2D;
				border-radius: 32rpx 32rpx 0 0;
			}

			.user-infos {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 16px  0 28px;
				box-sizing: border-box;
				width: 100%;
				.qqq{
					display: flex;
					align-items: center;
					.custom-avatar {
						width: 160rpx;
						height: 160rpx;
						margin-top: -80rpx;
						border-radius: 50%;
						border: 8rpx solid #FFF;
					}
					
					.name {
						height: 48rpx;
						font-size: 36rpx;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 48rpx;
						margin-top: 10rpx;
						margin-left: 40rpx;
					}
					.sync {
						font-size: 30rpx;
						color: #FFFFFF;
						line-height: 48rpx;
						margin-top: 32rpx;
						padding: 0 20rpx;
						border-radius: 24rpx;
						margin-left: 40rpx;
						border: 2rpx solid #FFFFFF;
					}
				}
				.aaa{
					width: 89px;
					height: 28px;
					background: #DFC791;
					border-radius: 14px;
					border: 1px solid #2F2E3B;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 18px;
						height: 18px;
					}
					text{
						font-size: 12px;
						font-family: HarmonyOS_Sans_SC;
						color: #101010;
						margin-left: 5px;
					}
				}
			}

			.navigation {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 48rpx 24rpx;
				background: #292C2D;

				.item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 224rpx;
					height: 144rpx;
					
					view:nth-child(1){
						width: 40px;
						height: 40px;
						image{
							width: 100%;
							height: 100%;
						}
					}

					.label {
						height: 40rpx;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						margin-top: 16rpx;
					}
				}
			}

			.task {
				width: 750rpx;
				background: #FFFFFF;
				padding: 32rpx;
				margin-top: 20rpx;

				.header {
					height: 40rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #2E2B2B;
					line-height: 40rpx;
				}

				.content {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-top: 32rpx;

					.left {
						display: flex;
						flex-direction: row;
						justify-content: left;
						align-items: center;

						.icon {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}

						.text-info {
							margin-left: 20rpx;

							.title {
								height: 36rpx;
								font-size: 28rpx;
								font-weight: bold;
								color: #2E2B2B;
								line-height: 36rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}

							.intro {
								height: 32rpx;
								font-size: 24rpx;
								color: #C3C2C1;
								line-height: 32rpx;
								margin-top: 10rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}
						}
					}

					.button {
						width: 160rpx;
						height: 64rpx;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 64rpx;
						text-align: center;
						background: #2F2E3B;
						border-radius: 8rpx;
						margin: 0;
					}
					.buttons{
						width: 160rpx;
						height: 64rpx;
						font-size: 28rpx;
						color: #999999;
						line-height: 64rpx;
						text-align: center;
						background: #DEDEDE;
						border-radius: 8rpx;
					}
				}
			}
			
			.my-team{
				width: 750rpx;
				background: #FFFFFF;
				padding: 32rpx;
				margin: 20rpx auto;
				
				
				
				.team-child{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 48rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.child-left{
						display: flex;
						align-items: center;
						.team-title{
							margin-left: 20rpx;
							view:nth-child(1){
								font-size: 32rpx;
								font-family: HarmonyOS_Sans_SC;
								color: #101010;
								margin-bottom: 8rpx;
							}
							view:nth-child(2){
								font-size: 24rpx;
								font-family: HarmonyOS_Sans_SC;
								color: #999999;
							}
						}
					}
				}
			}

			.menus {
				width: 750rpx;
				// height: 200rpx;
				background: #292C2D;
				padding: 48rpx 32rpx 0;
				margin-top: 20rpx;
				margin-bottom: 48rpx;
				
				.group-card {
					width: 100%;
					height: 136rpx;
					background: #292C2D;
					border-radius: 12rpx;
					border: 2rpx solid #7c7c7c;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 28rpx 30rpx;
					padding-right: 32rpx;
					margin-bottom: 48rpx;
					position: relative;
				
					.card-left {
						display: flex;
						align-items: center;
				
						view:nth-child(2) {
							margin-left: 20rpx;
							font-size: 32rpx;
							font-family: HarmonyOS_Sans_SC_Bold;
							color: #FFFFFF;
							font-weight: bold;
						}
					}
				
					.card-right {
						width: 136rpx;
						height: 48rpx;
						background: #a8a8a8;
						border-radius: 24rpx;
						text-align: center;
						line-height: 48rpx;
						font-size: 24rpx;
						font-family: HarmonyOS_Sans_SC_Medium;
						color: #FFFFFF;
					}
					
					.close-icon{
						position: absolute;
						right: 0;
						top: 0;
						width: 32rpx;
						height: 32rpx;
					}
				}
				
				.item-title{
					margin-bottom: 48rpx;
					font-size: 36rpx;
					font-family: HarmonyOS_Sans_SC_Bold;
					color: #FFFFFF;
					font-weight: bold;
				}

				.item {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 32rpx;
					border-bottom: 2rpx solid #F5F5F8;
					margin-bottom: 30rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.label {
						height: 40rpx;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 40rpx;
					}

				}
			}
			// 大家都在抢
			.list {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 0 22rpx;
				margin-top: 20rpx;
			
				.item {
					width: 340rpx;
					height: 512rpx;
					background: #FFFFFF;
					border-radius: 12rpx;
					
					.cover-box {
						width: 340rpx;
						height: 340rpx;
						position: relative;
						
						.tag {
							width: 92rpx;
							height: 48rpx;
							position: absolute;
							top: 16rpx;
							left: 16rpx;
						}
						.quantity {
							width: 320rpx;
							line-height: 56rpx;
							text-align: center;
							font-size: 24rpx;
							color: #FFFFFF;
							position: absolute;
							bottom: 0;
							left: 0;
							background: rgba($color: #000000, $alpha: 0.7);
							border-radius: 0 0 16rpx 16rpx;
						}
					}
			
					.info-box {
						padding: 20rpx;
						
						.name {
							height: 72rpx;
							font-size: 28rpx;
							color: #2E2B2B;
							line-height: 36rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
						
						.tips {
							height: 32rpx;
							font-size: 24rpx;
							color: #C3C2C1;
							line-height: 32rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							margin-top: 10rpx;
						}
						
						.price {
							height: 40rpx;
							font-size: 32rpx;
							font-weight: bold;
							color: #DFC791;
							line-height: 40rpx;
							margin-top: 10rpx;
							
							.unit {
								font-size: 24rpx;
								margin-right: 10rpx;
							}
						}
					}
				}
			}
			.all-people{
				
			}
			
			.empty-box {
				min-height: 60vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			

			.copy-right {
				margin-top: 80rpx;

				.header {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					// padding: 0 144rpx;

					.line {
						width: 80rpx;
						height: 2rpx;
						background-color: #C3C2C1;
					}

					.logo {
						width: 214rpx;
						height: 36rpx;
						margin: 0 20rpx;
					}
				}

				.slogan {
					height: 32rpx;
					font-size: 24rpx;
					color: #C3C2C1;
					line-height: 32rpx;
					text-align: center;
					margin-top: 22rpx;
				}

			}

		}

	}

	.customerBack {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.7);
	}

	.customerBacks {
		position: fixed;
		top: 270rpx;
		left: 86rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 578rpx;
		height: 706rpx;
		z-index: 1;

		.customerName {
			// width: 192rpx;
			height: 48rpx;
			font-size: 48rpx;
			line-height: 72rpx;
			color: #0F0E0C;
			text-align: center;
			margin-top: 84rpx;
		}

		.customerContent {
			text-align: center;
			color: #333333;
			margin-top: 396rpx;
			font-size: 28rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.06);
			padding-bottom: 40rpx;
		}

		.customerFlex {
			display: flex;
			justify-content: space-between;
			
			.left,
			.right {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				
				text {
					margin-left: 10rpx;
				}
			}

			.left {
				width: 288rpx;
				height: 96rpx;
				line-height: 96rpx;
				color: #F8852A;
				font-size: 28rpx;
				text-align: center;
				background-color: transparent;
			}

			.right {
				color: #333333;
				width: 288rpx;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
			}

			.customerShu {
				width: 2rpx;
				height: 96rpx;
				border-left: 2rpx solid rgba(0, 0, 0, 0.06);
			}
		}
	}

	.cancel {
		position: fixed;
		left: 344rpx;
		top: 1000rpx;
	}

	button {
		border: none;
	}

	button::after {
		border: none;
	}
	
	
	// 海报
	.posterBack {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba($color: #000000, $alpha: 0.7);
		z-index: 999;
	}
	
	.posterBacks {
		position: fixed;
		z-index: 99999;
	
		.shareImg1 {
			position: fixed;
			top: 0rpx;
			left: 0%;
			width: 100%;
			height: calc(100vh - 360rpx);
			overflow: auto;
			z-index: 100;
			text-align: center;
		}
	
		.canvas_nav {
			width: 750rpx;
			height: 356rpx;
			// background: #F6F6F6;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0px 0px;
			position: fixed;
			bottom: 0;
			z-index: 99999;
			left: 0;
			padding: 40rpx 108rpx;
	
			.canvas_nav_top {
				display: flex;
				justify-content: center;
				align-items: center;
	
				.canvas-child {
					width: 162rpx;
					height: 162rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #333333;
					padding: 0;
					border: none;
					margin: 0;
	
					view {
						margin-top: 16rpx;
					}
				}
	
			}
		}
	
		.canvas_nav-bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 112rpx;
			background: #FFFFFF;
			text-align: center;
			line-height: 112rpx;
			font-size: 32rpx;
			color: #333330;
			left: 0;
		}
	}
</style>
